<template>
  <div class="ranking_box">
    <div class="ranking_bg">
      <div class="top">{{ state.list.length > 0 ? 'U星能周度排行榜' : "- 暂无数据 -" }}</div>
      <div class="content">
        <!-- <div class="description">
          - {{ state.list.length > 0 ? 'U星能排名' : "暂无数据" }} -
        </div> -->

        <!-- <div class="top3" v-if="state.list.length > 0">
          <div class="top_02">
            <img src="/images/ranking_2.png" class="ranking" alt="" />
            <img :src="state.avatarPrefix + state.list[1]?.avatar" alt="" class="top_avatar" v-if="state.list[1]?.avatar" />
            <div alt="" class="top_avatar top_avatar_text" v-else>
              暂无
            </div>
            <div class="top_name">{{ state.list[1]?.nickname || "暂无" }}</div>
            <div class="top_score">{{ state.list[1]?.u_num || '-' }}分</div>
          </div>
          <div class="top_01">
            <img src="/images/ranking_1.png" class="ranking" alt="" />
            <img :src="state.avatarPrefix + state.list[0]?.avatar" alt="" class="top_avatar" v-if="state.list[0]?.avatar" />
            <div alt="" class="top_avatar top_avatar_text" v-else>
              暂无
            </div>
            <div class="top_name">{{ state.list[0].nickname || "暂无" }}</div>

            <div class="top_score">{{ state.list[0].u_num || '-' }}分</div>
          </div>
          <div class="top_03">
            <img src="/images/ranking_3.png" class="ranking" alt="" />
            <img :src="state.avatarPrefix + state.list[2]?.avatar" alt="" class="top_avatar " v-if="state.list[2]?.avatar" />
            <div alt="" class="top_avatar top_avatar_text" v-else>
              暂无
            </div>
            <div class="top_name">{{ state.list[2]?.nickname || "暂无" }}</div>
            <div class="top_score">{{ state.list[2]?.u_num || '-' }}分</div>
          </div>
        </div> -->
        <div class="item_box" v-if="state.list.length > 0">
          <div>
            <div class="item" v-for="(item, index) in state.list" :key="'item' + index">
                <div class="item_num">NO.{{ index + 1 }}</div>
                <div class="item_data">
                  <img :src="state.avatarPrefix + item.avatar" alt="">
                  <div class="item_name">{{ item.nickname }}</div>
                </div>
                <div class="item_score">{{ item.u_num }}</div>
            </div>
            <!-- <div class="paging">
              <span class="disabled">上一页</span>
              <span>下一页</span>
            </div> -->
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="my_ranking">

          <div class="my_data" v-if="state.my_data.rank">
            <div class="my_icon">
              <img :src="state.avatarPrefix + state.my_data.avatar" alt="">
            </div>
            <div class="my_sequence">
              <div class="my_sequence_title">{{ state.my_data.nickname }}</div>
              <div class="my_sequence_num"> NO.{{ state.my_data.rank || "- - - -" }}</div>
            </div>
            <!-- <div class="my_name">{{ state.my_data.nickname }}</div> -->
          </div>
          <div class="my_score" v-if="state.my_data.rank">{{ state.my_data.u_num }}</div>
          <div class="my_none" v-else> 您尚未参与游戏~ </div>
        </div>
      </div>

      <!-- 奖励弹窗 -->
      <MyPopover
        :title="state.popoverTitle"
        :isShow="state.myPopoverPage"
        :tips="state.popoverTips"
        :icon="state.popoverIcon"
        @handleClose="state.myPopoverPage = false;">
        <div>
          在U星能排行榜中排名第{{state.popoverRack}}名<br />
          {{ state.popoverMsg }}
        </div>
      </MyPopover>

      <div class="go_home" @click="goHome">返 回</div>
    </div>
  </div>
</template>
  
<script setup>
import { reactive, ref, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router"
import { getRankingList, weekGift } from "../api/index"
import MyPopover from "../components/MyPopover.vue";
const router = useRouter()

const state = reactive({
  avatarPrefix: import.meta.env.VITE_AVATAR_URL,
  list: [],
  my_data: {
    rank: "",
  },
  popoverTitle: '恭喜您',
  popoverIcon: null,
  popoverMsg: '',
  popoverTips: false,
  popoverRack: null,
})

onMounted(() => {
  handleGetRankingList();
  // handleGetWeekGift();
})

function handleGetRankingList() {
  getRankingList().then(res => {
    state.my_data = res.data.own
    state.list = res.data.lst
  })
}

// 周度奖品
function handleGetWeekGift() {
  weekGift().then(res => {
    const { data } = res;
    if (!data) return;

    state.myPopoverPage = true;
    state.popoverRack = data.rack;
    state.popoverMsg = `获得${data.name}${data.content}`;
    state.popoverIcon = data.icon;
  })
}

function goHome() {
  router.push('/');
}


</script>
<style  scoped>
.ranking_box {
  width: 100%;
  height: 100vh;
  /* overflow-y: scroll; */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1a7df5;
}

.ranking_bg {
  width: 100%;
  background: url('https://yinli-qixi-run.varwey.com/2023_ca/u_chess/images/rank_bg.png') no-repeat;
  background-size: contain;
}

.top {
  padding: 180px 0 0 60px;
  font-family: "ChangAnunitype-Bold";
  font-size: 80px;
  /* filter:drop-shadow(0px 0px 10px rgba(36, 144, 220,0.5)) */
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 117px;
  z-index: 99;
}

.ranking_title {
  width: 100%;
  height: 100%;
}

.my_ranking {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
}

.my_ranking>div {
  display: flex;
  flex: 1;
  /* justify-content: center; */
  align-items: center;

}

.my_sequence {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  font-family: "ChangAnunitype-Regular";
}

.my_sequence_title {
  /* background-color: #2490dc; */
  color: #333;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  border-radius: 20px;
  width: 300px;
  /* text-align: center; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* border: 1px solid #177ec8; */

}

.my_sequence_num {
  font-size: 24px;
  color: #2490dc;
}

.my_data {
  /* flex: 1.6 !important; */
}

.my_icon {
  width: 91px;
  height: 91px;
  border-radius: 50%;
  background-color: #177ec8;
  overflow: hidden;
}

.my_icon>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* display: none; */
}

.my_name {
  color: #353636;
  font-size: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 5px;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.my_score {
  font-size: 36px;
  color: #333;
  font-family: "ChangAnunitype-Bold";
  text-align: center;
  justify-content: end;
}

.content {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding-top: 60px;
  /* padding-bottom: 200px; */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
}

.description {
  font-family: "ChangAnunitype-Regular";
  color: #aeaeae;
  text-align: center;
  font-size: 30px;
  letter-spacing: 2px;
}

.top3 {
  margin-top: 80px;
  /* width: 100%; */
  display: flex;
  background: url('https://yinli-qixi-run.varwey.com/2023_ca/u_chess/images/ranking_bottom.png') no-repeat 50% bottom;
  background-size: 709px;
  margin: 0 15px;
  padding-bottom: 15px;
}

.top3>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.top3>div>img {
  width: 49px;
  height: 56px;
  /* margin-bottom: 20px; */
}

.top3 .ranking {
  position: relative;
  z-index: 10;
}

.top_01 {
  transform: translateY(-20%);
}

.top_01>img {
  width: 49px;
  height: 56px;
}

.top_name {
  color: #333333;
  font-size: 30px;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* transform: translateX(16px); */
  margin-top: 168px;
  font-family: "ChangAnunitype-Regular";
}

.top_01 .top_name {
  /* margin-top: 188px; */
}

.top_score {
  color: #336acd;
  font-size: 26px;
  font-family: "ChangAnunitype-Regular";
  /* transform: translateX(16px); */
}

.top_avatar {
  display: block;
  position: absolute;
  /* background-color: #ff4a62; */
  width: 150px !important;
  height: 150px !important;
  border-radius: 50%;
  top: 40px;
  /* left: 82px; */
  border: 2px solid #fff;
  /* transform: translateX(8px); */
  object-fit: cover;
}

.top_01>.top_avatar {
  top: 34px;
  width: 156px !important;
  height: 156px !important;
  /* transform: translateX(10px); */
}

.item_box {
  height: 200px;
  background: #f2f2f2;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  margin-top: -2px;
  /* display: flex;
    flex-direction: column; */

  flex: 1;
}

.item_box>div {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-bottom: 160px;
}

.item_box .paging {
  text-align: center;
  color: #177ec8;
  font-size: 30px;
  margin-top: 30px;
}
.item_box .paging span {
  margin: 0 30px;
}
.item_box .paging .disabled {
  color: #b3c7d5;
}

.item {
  display: flex;
  margin-top: 40px;
}

.item>div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item_data {
  flex: 1.6 !important;
  justify-content: flex-start !important;
}

.item_num {
  color: #177ec8;
  font-size: 34px;
  font-family: "ChangAnunitype-Regular";
}

.item_data>img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.item_name {
  color: #000000;
  font-size: 30px;
  padding-left: 10px;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item_score {
  font-family: "ChangAnunitype-Regular";
  font-size: 34px;
  color: #333;
}

.go_home {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 80px;
  width: 150px;
  height: 64px;
  background: linear-gradient(120deg, #91d8ff, #4e81e9);
  box-shadow: 2px 5px 3px rgba(78, 129, 233, 1);
  /* background-color: #6accf8; */
  /* border: 1px solid #086eb7; */
  border-top-right-radius: 64px;
  border-bottom-right-radius: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "ChangAnunitype-Regular";
  font-size: 30px;
}

.my_none {
  flex: 2 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "ChangAnunitype-Regular";
  font-size: 30px;
  color: #086eb7;
}

.top_avatar_text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #aeaeae;
  font-size: 30px;
  font-family: "ChangAnunitype-Regular";
}
</style>